<template>
  <div
    v-if="!nextPageLabel.hide"
    class="easy-container text-center info none-select"
    :class="{ 'pointer': nextPageLabel.click }"
    @click="loadMore"
    v-loading="loading"
  >
    {{ nextPageLabel.label }}
  </div>
</template>

<script>
export default {
  name: 'load-more',
  props: ['list', 'nextPage', 'loading', 'autoHide'],
  computed: {
    nextPageLabel() {
      if (this.loading) return { label: '正在加载中...', click: false };
      else if (this.list && this.list.length === 0) return { hide: this.autoHide, label: '没有数据', click: false };
      else if (this.nextPage) return { label: '加载更多', click: true };
      return { hide: this.autoHide, label: '没有更多了', click: false };
    },
  },
  methods: {
    loadMore() { if (this.nextPageLabel.click) this.$emit('loadMore', this.nextPage); },
  },
};
</script>

<style></style>
